<template>
<onekit-page>
<onekit-view onekit-class="container" :onekit-style="`height:${editorHeight}px;`">
	<onekit-editor onekit-class="ql-container" id="editor" :placeholder="placeholder" @Statuschange="onStatusChange" @Ready="onEditorReady"></onekit-editor>
</onekit-view>
<onekit-view onekit-class="toolbar" :onekit-style="`bottom: ${isIOS?keyboardHeight:0}px; height: ${toolBarHeight}px; padding-bottom: ${isIOS?safeHeight:0}px`" :hidden="false" @Touchend.stop="format">
	<i class="iconfont icon-charutupian" @Touchend.stop="insertImage"></i>
	<i :class="`iconfont icon-format-header-2 ${(formats.header == 2)?'ql-active':''}`" data-name="header" :data-value="2"></i>
	<i :class="`iconfont icon-format-header-3 ${(formats.header == 3)?'ql-active':''}`" data-name="header" :data-value="3"></i>
	<i :class="`iconfont icon-zitijiacu ${formats.bold?'ql-active':''}`" data-name="bold"></i>
	<i :class="`iconfont icon-zitixieti ${formats.italic?'ql-active':''}`" data-name="italic"></i>
	<i :class="`iconfont icon-zitixiahuaxian ${formats.underline?'ql-active':''}`" data-name="underline"></i>
	<i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
	<i :class="`iconfont icon-youxupailie ${(formats.list == 'ordered')?'ql-active':''}`" data-name="list" data-value="ordered"></i>
	<i :class="`iconfont icon-wuxupailie ${(formats.list == 'bullet')?'ql-active':''}`" data-name="list" data-value="bullet"></i>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
const ONEKIT_JSON= {
  "navigationBarTitleText": "editor",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["height:","editorHeight","px;","placeholder","false","bottom: ","isIOS","keyboardHeight","px; height: ","toolBarHeight","px; padding-bottom: ","safeHeight","px","iconfont icon-format-header-2 ","formats","header","iconfont icon-format-header-3 ","iconfont icon-zitijiacu ","bold","iconfont icon-zitixieti ","italic","iconfont icon-zitixiahuaxian ","underline","iconfont icon-youxupailie ","list","iconfont icon-wuxupailie "],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'editor',
        "path":'page/component/pages/editor/editor'
};
    },
    "data":{
        "formats":{
},
        "readOnly":false,
        "placeholder":'开始输入...',
        "editorHeight":300,
        "keyboardHeight":0,
        "isIOS":false,
        "safeHeight":0,
        "toolBarHeight":50
},
    "readOnlyChange"(){
      this.setData({
        "readOnly":!this.data.readOnly
});
    },
    "onLoad"(){
      const {platform,safeArea,model,screenHeight} = wx.getSystemInfoSync();
      let safeHeight;
      if(safeArea)
      {
        safeHeight = screenHeight - safeArea.bottom;
      }
else
      {
        safeHeight = 32;
      };
      this._safeHeight = safeHeight;
      let isIOS = platform == 'ios';
      this.setData({
        isIOS,
        safeHeight,
        "toolBarHeight":isIOS?(safeHeight + 50):50
});
      const that = this;
      this.updatePosition(0);
      let keyboardHeight = 0;
      wx.onKeyboardHeightChange((res)=>{
      if(res.height == keyboardHeight)
        {
          return;
        };
      const duration = (res.height > 0)?(res.duration * 1000):0;
      keyboardHeight = res.height;
      setTimeout(()=>{wx.pageScrollTo({
          "scrollTop":0,
          "success"(){
            that.updatePosition(keyboardHeight);
            that.editorCtx.scrollIntoView();
          }
})},duration);
    });
    },
    "updatePosition"(keyboardHeight){
      const toolbarHeight = 50;
      const {windowHeight,platform} = wx.getSystemInfoSync();
      let editorHeight = (keyboardHeight > 0)?(((windowHeight - keyboardHeight)) - toolbarHeight):windowHeight;
      if(keyboardHeight == 0)
      {
        this.setData({
            editorHeight,
            keyboardHeight,
            "toolBarHeight":this.data.isIOS?(50 + this._safeHeight):50,
            "safeHeight":this._safeHeight
});
      }
else
      {
        this.setData({
            editorHeight,
            keyboardHeight,
            "toolBarHeight":50,
            "safeHeight":0
});
      };
    },
    "calNavigationBarAndStatusBar"(){
      const systemInfo = wx.getSystemInfoSync();
      const {statusBarHeight,platform} = systemInfo;
      const isIOS = platform == 'ios';
      const navigationBarHeight = isIOS?44:48;
      return statusBarHeight + navigationBarHeight;
    },
    "onEditorReady"(){
      const that = this;
      wx.createSelectorQuery().select('#editor').context(function(res){
      that.editorCtx = res.context;
    }).exec();
    },
    "blur"(){
      this.editorCtx.blur();
    },
    "format"(e){
      let {name,value} = e.target.dataset;
      if(!name)
      return;
      this.editorCtx.format(name,value);
    },
    "onStatusChange"(e){
      const formats = e.detail;
      this.setData({
        formats
});
    },
    "insertDivider"(){
      this.editorCtx.insertDivider({
        "success"(){
          console.log('insert divider success');
        }
});
    },
    "clear"(){
      this.editorCtx.clear({
        "success"(res){
          console.log("clear success");
        }
});
    },
    "removeFormat"(){
      this.editorCtx.removeFormat();
    },
    "insertDate"(){
      const date = new Date();
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.editorCtx.insertText({
        "text":formatDate
});
    },
    "insertImage"(){
      const that = this;
      wx.chooseImage({
        "count":1,
        "success"(res){
          that.editorCtx.insertImage({
            "src":res.tempFilePaths[0],
            "data":{
                "id":'abcd',
                "role":'god'
},
            "width":'80%',
            "success"(){
              console.log('insert image success');
            }
});
        }
});
    }
});

</script>
<style 
 lang="css">
@import '/page/component/pages/editor/assets/iconfont.css';
.onekit-page>.onekit-view {
  max-width: 100% ;
}
.container {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
}
.ql-container {
  box-sizing: border-box ;
  width: 100% ;
  height: 100% ;
  font-size: 16px ;
  line-height: 1.5 ;
  overflow: auto ;
  padding: 10px 10px 20px 10px ;
  border: 1px solid #ECECEC ;
}
.ql-active {
  color: #22C704 ;
}
.iconfont {
  display: inline-block ;
  width: 30px ;
  height: 30px ;
  cursor: pointer ;
  font-size: 20px ;
}
.toolbar {
  box-sizing: border-box ;
  padding: 0 10px ;
  height: 50px ;
  width: 100% ;
  position: fixed ;
  left: 0 ;
  right: 100% ;
  bottom: 0 ;
  display: flex ;
  align-items: center ;
  justify-content: space-between ;
  border: 1px solid #ECECEC ;
  border-left: none ;
  border-right: none ;
}
</style>